<template>
	<view>
		<u-navbar
			:title="activityInfo.title"
			leftText="返回"
			bgColor="#ffffff"
			@leftClick="leftClick"
			:autoBack="false"
		>
		</u-navbar>
		
		<u-toast ref="uToast"></u-toast>
		
		<view style="margin-top: 70px;">
			<view class="imgBk" :style="{backgroundImage: 'url(' + activityInfo.eventImgUrl + ')'}">
				
			</view>
			
			<view style="padding: 10px;">
				
				<view style="font-weight: 600;font-size: 40rpx;font-family: monospace">{{activityInfo.title}}</view>
				<view style="margin-top: 5px;">
					<view v-if="activityInfo.status == '已通过'" style="font-size: 12px;font-weight: 200;color: green">{{activityInfo.status}}</view>
					<view v-if="activityInfo.status == '报名中'" style="font-size: 12px;font-weight: 200;color: purple">{{activityInfo.status}}</view>
					<view v-if="activityInfo.status == '已结束'" style="font-size: 12px;font-weight: 200;color: red">{{activityInfo.status}}</view>
					<view v-if="activityInfo.status == '进行中'" style="font-size: 12px;font-weight: 200;color: blue">{{activityInfo.status}}</view>
				</view>
				
				<view style="margin-top: 12px;display: flex;flex-direction: row;">
					<u-icon name="map" color="red" size="28" style="width: 15px;"></u-icon>
					<view class="smallTitle">{{activityInfo.location}}</view>
				</view>
				
				<view style="margin-top: 12px;display: flex;flex-direction: row;">
					<view class="smallTitle" style="width: 100px;">#ID：{{activityInfo.eventId}}</view>
					<view class="smallTitle" style="width: 100px;">#最大人数：{{activityInfo.maxNum}}</view>
				</view>
				<u-line margin="1px 0 5px 0"></u-line>
				<u-row>
					<u-col :span="6">
						<view v-if="isActivityDetail == false" style="margin: 0 auto;width: 99%;"><u-button text="活动详情" @click="isActivityDetail = true"></u-button></view>
						<view v-if="isActivityDetail == true" style="margin: 0 auto;width: 99%;"><u-button type="error" :plain="true" text="活动详情"></u-button></view>
					</u-col>
					<u-col :span="6">
						<view v-if="isActivityDetail == true" style="margin: 0 auto;width: 99%;"><u-button text="活动人员" @click="isActivityDetail = false"></u-button></view>
						<view v-if="isActivityDetail == false" style="margin: 0 auto;width: 99%;"><u-button type="error" :plain="true" text="活动人员"></u-button></view>
					</u-col>
				</u-row>
				<view style="height: 10px;"></view>
				
				<view v-if="isActivityDetail  == true">
					<view>
							<view class="itemName">活动时间</view>
							<view class="smallTitle" style="margin: 10px 0 5px 5px">
								开始时间： {{activityInfo.startTime}}
							</view>
							<view class="smallTitle" style="margin: 10px 0 5px 5px">
								结束时间： {{activityInfo.endTime}}
							</view>
						</view>
						<!-- <u-line margin="10px 0"></u-line>
						<view>
							<view class="itemName">主办方</view>
							<view class="smallTitle" style="margin: 10px 0 5px 5px">
								主办人/团队： {{activityInfo.supplyName}}
							</view>
						</view> -->
						<u-line margin="10px 0"></u-line>
						<view>
							<view class="itemName">积分设置</view>
							<view class="smallTitle" style="margin: 10px 0 5px 5px">
								可获积分： {{activityInfo.eventScore}}
							</view>
						</view>
						<u-line margin="10px 0"></u-line>
						<view>
							<view class="itemName">活动描述</view>
							<view class="smallTitle" style="margin: 10px 0 5px 5px">
								{{activityInfo.description}}
							</view>
						</view>{{activityInfo.tags}}
						<u-line margin="10px 0"></u-line>
					</view>
				</view>
				
				<view v-if="isActivityDetail  == false">
					<u-line margin="15px 0 0 0"></u-line>
					<u-list >
						<u-list-item
							v-for="(item, index) in activityList"
							:key="index"
						>
							<u-cell
								:title="item.userName"
							>
								<u-avatar
									slot="icon"
									shape="square"
									size="70"
									:src="item.userAvatar"
									customStyle="margin: -3px 5px -3px 0"
								></u-avatar>
							</u-cell>
						</u-list-item>
					</u-list>
				</view>
				
				
			
			<br><br>
		</view>
		<view class="isjoin" v-if="activityInfo.status == '报名中'">
			<u-button v-if="isJoin == false && activityInfo.tags == '0'" type="primary" text="报名" @click="joinActivity"></u-button>
			<u-button v-if="isJoin == true && activityInfo.tags == '0'" type="warning" text="取消报名" @click="unJoinShow = true"></u-button>
			
			
			<u-button v-if="isJoin == false && isTeam == true" type="primary" text="报名" @click="joinActivity"></u-button>
			<u-button v-if="isJoin == true && isTeam == true" type="warning" text="取消报名" @click="unJoinShow = true"></u-button>
			<u-button v-if="isTeam == false" type="error" disabled text="不在活动规定的团队内"></u-button>
			
		</view>
		<view class="isjoin" v-if="activityInfo.status != '报名中'">
			<u-button type="error" disabled text="不可报名"></u-button>
		</view>
		
		<u-modal :show="unJoinShow" content='确认取消报名吗？' :showCancelButton='true' @confirm="unJoin" @cancel="unJoinShow = false"></u-modal>
		
		
	</view>
	
</template>

<script>
import { getActivityDetailApi, getActivityPeople, isJoinApi, joinActivityApi, unJoinActivityApi } from '../../../utils/activity'
import { isTeamApi } from '../../../utils/team'
	export default{
		data(){
			return{
				activityInfo: {},
				isJoin: undefined,
				isTeam: undefined,
				unJoinShow: false,
				activityId: undefined,
				isActivityDetail: true,
				activityList: [],
			}
		},
		methods:{
			leftClick(){
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {
					//重新定向跳转页面
					uni.reLaunch({
						url: '/pages/view/homepage/homepage'    
					})   
				}
				return;
				// #endif
				uni.navigateBack(1)
			},
			joinActivity(){
				let userId = uni.getStorageSync('userInfo').id
				let that = this
				console.log(this.activityInfo.eventId,userId)
				joinActivityApi(this.activityInfo.eventId,userId).then(res => {
					if(res.code == 0){
						that.$refs.uToast.show({
							type: 'success',
							title: '报名成功',
							message: "报名成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
						//是否报名活动
						isJoinApi(that.activityId,userId).then(res => {
							if(res.code==0){
								that.isJoin = res.data
								// console.log('是否报名活动',that.isJoin)
							}
						})
					}else{
						that.$refs.uToast.show({
							type: 'error',
							title: '报名失败',
							message: "报名失败",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					}
				})
			},
			unJoin(){
				this.unJoinShow = false
				let userId = uni.getStorageSync('userInfo').id
				let that = this
				console.log(this.activityInfo.eventId)
				unJoinActivityApi(this.activityInfo.eventId,userId).then(res => {
					if(res.code == 0){
						that.$refs.uToast.show({
							type: 'success',
							title: '取消报名成功',
							message: "取消报名成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
						//是否报名活动
						isJoinApi(that.activityId,userId).then(res => {
							if(res.code==0){
								that.isJoin = res.data
								// console.log('是否报名活动',that.isJoin)
							}
						})
					}else{
						that.$refs.uToast.show({
							type: 'error',
							title: '取消报名失败',
							message: "取消报名失败",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					}
				})
			}
		},
		onLoad: function(option) {
			console.log('option',option.id)
			this.activityId = option.id
			let userId = uni.getStorageSync('userInfo').id
			let that = this
			getActivityDetailApi(option.id).then(res => {
				if(res.code == 0){
					console.log(res.data)
					that.activityInfo = res.data
					uni.setNavigationBarTitle({
						title: that.activityInfo.title == '' ? '活动详情' : that.activityInfo.title
					})
					//是否属于该团队
					if(that.activityInfo.tags != '0' ){
						isTeamApi(userId,that.activityInfo.tags+'').then(res=> {
							if(res.code == 0){
								console.log('是否属于该团队',userId,res.data,that.activityInfo.tags+'')
								that.isTeam = res.data
							}
						})
					}
					
				}
			})
			//是否报名活动
			isJoinApi(option.id,userId).then(res => {
				if(res.code==0){
					that.isJoin = res.data
					// console.log('是否报名活动',that.isJoin)
				}
			})
			
			getActivityPeople(this.activityId).then(res => {
				if(res.code==0){
					console.log(res)
					that.activityList = res.data.volunteerVos
					// console.log('是否报名活动',that.isJoin)
				}
			})
		},
	}
</script>

<style scoped>
	.imgBk{
		width: 100%;
		height: 220px;
		margin-top: 43px;
		background-size: 100% 100%;
	}
	.isjoin{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40px;
		background-color: aliceblue;
	}
	.smallTitle{
		font-weight: 200;font-size: 27rpx;
	}
	.itemName{
		font-weight: 600;font-size: 35rpx;font-family: monospace;
	}
</style>